<template>
  <div>
    <el-form
      ref="basicForm"
      :class="required == '1' ? 'require' : 'notRequire'"
      :inline="true"
      :model="basicInfo"
      label-position="right"
      label-width="120px"
      :rules="basicRules"
      size="small"
    >
      <el-row type="flex" justify="end" style="padding-right: 40px">
        <el-button type="primary" @click="save">保存</el-button>
        <!-- <el-button type="primary" @click="test">test</el-button> -->
      </el-row>
      <el-row class="basic">
        <el-form-item label="患者姓名" prop="name">
          <el-input v-model="basicInfo.name" clearable />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="basicInfo.sex" clearable>
            <el-option value="男" />
            <el-option value="女" />
            <el-option value="未知" />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="basicInfo.age" clearable>
            <template slot="append"> 岁 </template>
          </el-input>
        </el-form-item>
        <el-form-item label="身高" prop="height">
          <el-input v-model.number="basicInfo.height" clearable>
            <template slot="append"> cm </template>
          </el-input>
        </el-form-item>
        <el-form-item label="体重" prop="weight">
          <el-input v-model.number="basicInfo.weight" clearable>
            <template slot="append"> kg </template>
          </el-input>
        </el-form-item>
        <el-form-item label="国籍" prop="nationality">
          <el-select v-model="basicInfo.nationality" clearable>
            <el-option value="中国" />
            <el-option value="外国" />
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="ethnicity">
          <el-select
            v-model="basicInfo.ethnicity"
            size="mini"
            filterable
            clearable
          >
            <el-option
              v-for="(nation, index) in nationList"
              :key="'民族' + index"
              :value="nation.nationName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker
            v-model="basicInfo.birthday"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactphone">
          <el-input v-model="basicInfo.contactphone" size="mini" clearable />
        </el-form-item>
        <el-form-item label="患者编号" prop="patientId">
          <el-input v-model="basicInfo.patientId" disabled clearable />
        </el-form-item>
        <el-form-item label="证件类型" prop="credentialstype">
          <el-select v-model="basicInfo.credentialstype" clearable>
            <el-option label="无" value="0" />
            <el-option label="身份证" value="1" />
            <el-option label="护照" value="2" />
            <el-option label="军官证" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="idcardid">
          <el-input v-model="basicInfo.idcardid" clearable />
        </el-form-item>
        <el-form-item label="婚姻状况" prop="maritalstatus">
          <el-select v-model="basicInfo.maritalstatus" clearable>
            <el-option value="未婚" />
            <el-option value="已婚" />
            <el-option value="离异" />
            <el-option value="丧偶" />
            <el-option value="未知" />
          </el-select>
        </el-form-item>
        <el-form-item label="职业" prop="job">
          <el-select v-model="basicInfo.job" size="mini" clearable>
            <el-option
              value="01"
              label="国家机关，党群组织，企事业单位负责人"
            />

            <el-option value="02" label="各类专业技术人员" />
            <el-option value="03" label="办事人员和有关人员" />
            <el-option value="04" label="商业及服务型工作人员" />
            <el-option value="05" label="农，林，牧，渔，水利业生产人员" />
            <el-option value="06" label="下岗或无业" />
            <el-option value="07" label="离退休" />
            <el-option value="08" label="学生" />
            <el-option value="09" label="均热" />
            <el-option value="10" label="不便分类的其他从业人员" />
          </el-select>
        </el-form-item>
        <el-form-item label="医保类型" prop="medicalinsurancetype">
          <el-select
            v-model="basicInfo.medicalinsurancetype"
            size="mini"
            clearable
          >
            <el-option value="1" label="城镇职工基本医疗保险" />
            <el-option value="2" label="新型农村合作医疗" />
            <el-option value="3" label="城镇居民基本医疗保险" />
            <el-option value="4" label="自费" />
            <el-option value="5" label="军免" />
          </el-select>
        </el-form-item>
        <el-form-item label="医保账号" prop="medicalinsuranceno">
          <el-input
            v-model="basicInfo.medicalinsuranceno"
            size="mini"
            clearable
          />
        </el-form-item>
      </el-row>
      <el-row class="area">
        <el-form-item label="户籍所在地" prop="idProvince">
          <el-select
            v-model="basicInfo.idProvince"
            size="mini"
            filterable
            clearable
            @change="provinceChange('id')"
          >
            <el-option
              v-for="(area, index) in areaList"
              :key="'户籍所在地' + index"
              :value="area.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="idCity">
          <el-select
            v-model="basicInfo.idCity"
            size="mini"
            clearable
            @change="cityChange('id')"
          >
            <el-option
              v-for="(city, index) in getCity('idProvince')"
              :key="'户籍所在地(市)' + index"
              :value="city.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="idArea">
          <el-select v-model="basicInfo.idArea" size="mini" clearable>
            <el-option
              v-for="(city, index) in getArea('idCity', 'idProvince')"
              :key="'户籍所在地(区)' + index"
              :value="city.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="idaddress">
          <el-input
            v-model="basicInfo.idaddress"
            placeholder="请输入详细地址"
          />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { newDispatch } from '@/api/triage/triage-new'
import {
  selectRegionEx,
  savePatientInfo,
  getPatientInfo
} from '@/api/green-channel/info'
export default {
  props: {
    id: {
      type: Object,
      default: () => {}
    },
    require: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      basicInfo: {},
      newInfo: {},
      areaList: [],
      nationList: [
        { nationCode: '01', nationName: '汉族' },
        { nationCode: '02', nationName: '蒙古族' },
        { nationCode: '03', nationName: '回族' },
        { nationCode: '04', nationName: '藏族' },
        { nationCode: '05', nationName: '维吾尔族' },
        { nationCode: '06', nationName: '苗族' },
        { nationCode: '07', nationName: '彝族' },
        { nationCode: '08', nationName: '壮族' },
        { nationCode: '09', nationName: '布依族' },
        { nationCode: '10', nationName: '朝鲜族' },
        { nationCode: '11', nationName: '满族' },
        { nationCode: '12', nationName: '侗族' },
        { nationCode: '13', nationName: '瑶族' },
        { nationCode: '14', nationName: '白族' },
        { nationCode: '15', nationName: '土家族' },
        { nationCode: '16', nationName: '哈尼族' },
        { nationCode: '17', nationName: '哈萨克族' },
        { nationCode: '18', nationName: '傣族' },
        { nationCode: '19', nationName: '黎族' },
        { nationCode: '20', nationName: '傈僳族' },
        { nationCode: '21', nationName: '佤族' },
        { nationCode: '22', nationName: '拉祜族' },
        { nationCode: '23', nationName: '高山族' },
        { nationCode: '24', nationName: '白族' },
        { nationCode: '25', nationName: '水族' },
        { nationCode: '26', nationName: '东乡族' },
        { nationCode: '27', nationName: '纳西族' },
        { nationCode: '28', nationName: '景颇族' },
        { nationCode: '29', nationName: '柯尔克孜族' },
        { nationCode: '30', nationName: '土族' },
        { nationCode: '31', nationName: '达斡尔族' },
        { nationCode: '32', nationName: '仫佬族' },
        { nationCode: '33', nationName: '羌族' },
        { nationCode: '34', nationName: '布朗族' },
        { nationCode: '35', nationName: '撒拉族' },
        { nationCode: '36', nationName: '毛南族' },
        { nationCode: '37', nationName: '仡佬族' },
        { nationCode: '38', nationName: '锡伯族' },
        { nationCode: '39', nationName: '阿昌族' },
        { nationCode: '40', nationName: '土族普米族' },
        { nationCode: '41', nationName: '塔吉克族' },
        { nationCode: '42', nationName: '怒族' },
        { nationCode: '43', nationName: '乌孜别克族' },
        { nationCode: '44', nationName: '俄罗斯族' },
        { nationCode: '45', nationName: '鄂温克族' },
        { nationCode: '46', nationName: '崩龙族' },
        { nationCode: '47', nationName: '保安族' },
        { nationCode: '48', nationName: '裕固族' },
        { nationCode: '49', nationName: '京族' },
        { nationCode: '50', nationName: '塔塔尔族' },
        { nationCode: '51', nationName: '独龙族' },
        { nationCode: '52', nationName: '鄂伦春族' },
        { nationCode: '53', nationName: '赫哲族' },
        { nationCode: '54', nationName: '门巴族' },
        { nationCode: '55', nationName: '珞巴族' },
        { nationCode: '56', nationName: '基诺族' },
        { nationCode: '97', nationName: '其他' },
        { nationCode: '98', nationName: '外国血统' }
      ],
      required: '',

      basicRules: {
        name: null,
        sex: null,
        age: null,
        height: null,
        weight: null,
        nationality: null,
        ethnicity: null,
        birthday: null,
        contactphone: null,
        patientId: null,
        credentialstype: null,
        idcardid: null,
        maritalstatus: null,
        job: null,
        medicalinsurancetype: null,
        medicalinsuranceno: null,
        idProvince: null,
        idCity: null,
        idArea: null,
        idaddress: null
      }
    }
  },
  watch: {
    require: {
      handler(val) {
        this.setRequire()
      },
      deep: true
    }
  },
  created() {
    this.selectRegionEx()
    this.getPatientInfo()
    this.setRequire()
  },
  methods: {
    test() {
      this.$nextTick(() => {
        this.$refs.basicForm.validate((valid) => {
          if (!valid) {
            this.$message.error('请通过验证')
          } else {
            this.$message.success('通过验证')
          }
        })
      })
    },
    setRequire() {
      if (this.require.length > 0) {
        this.required = this.require[0].value
        if (this.required !== '2') {
          Object.keys(this.basicRules).forEach((el) => {
            this.basicRules[el] = [
              {
                required: true,
                message: ' ',
                trigger: 'blur'
              }
            ]
          })
        } else {
          Object.keys(this.basicRules).forEach((el) => {
            this.basicRules[el] = null
          })
        }
      }
    },
    selectRegionEx() {
      selectRegionEx().then((res) => {
        this.areaList = res.data
      })
    },
    provinceChange(field) {
      this.$set(this.basicInfo, field + 'City', '')
      this.$set(this.basicInfo, field + 'Area', '')
    },
    cityChange(field) {
      this.$set(this.basicInfo, field + 'Area', '')
    },

    getCity(field) {
      let city = []
      let arr = []
      if (this.basicInfo[field]) {
        city = this.areaList.filter(
          (item) => item.name === this.basicInfo[field]
        )

        if (city.length > 0) {
          arr = city[0].cityList
        }
      }
      return arr
    },
    getArea(field, provinceField) {
      let area = []
      let arr = []
      if (this.getCity(provinceField).length > 0 && this.basicInfo[field]) {
        area = this.getCity(provinceField).filter(
          (item) => item.name === this.basicInfo[field]
        )
        if (area.length > 0) {
          arr = area[0].areaList
        }
      }
      return arr
    },
    getPatientInfo() {
      if (this.id.patientId && this.id.dispatchId) {
        getPatientInfo(this.id.patientId, this.id.dispatchId).then((res) => {
          this.basicInfo = res
          this.basicInfo.patientId = this.id.patientId
        })
      }
    },
    savePatient(obj) {
      this.$nextTick(() => {
        this.$refs.basicForm.validate((valid) => {
          if (!valid && this.required == '1') {
            this.$message.error('请通过验证')
          } else {
            savePatientInfo({
              ...this.newInfo,
              ...this.basicInfo,
              ...obj
            }).then((res) => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.getPatientInfo()
              } else {
                this.$message.error('保存失败')
              }
            })
          }
        })
      })
    },

    save() {
      if (this.id.patientId && this.id.dispatchId) {
        this.savePatient(this.id)
      } else {
        newDispatch({ apiToken: this.$store.getters.apiToken }).then((res) => {
          if (res.code === 0) {
            const obj = res.data
            this.basicInfo.patientId = obj.patientId
            this.$emit('getId', obj)
            getPatientInfo(res.data.patientId, res.data.dispatchId).then(
              (res) => {
                if (res.code === 0) {
                  this.newInfo = res.data
                  this.savePatient({
                    dispatchId: obj.dispatchId,
                    patientId: obj.patientId
                  })
                } else {
                  this.$message.error('保存失败')
                }
              }
            )
          } else {
            this.$message.error('保存失败')
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.basic {
  margin-top: 10px;
  .el-form-item--small.el-form-item {
    margin-bottom: 22px;
  }
  .el-form-item {
    width: 400px;
    .el-select {
      width: 255px;
    }
    .el-input {
      width: 255px;
    }
  }
}
.area {
  .el-select {
    width: 255px;
  }
}
.save {
  width: 180px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
<style lang="scss">
.notRequire {
  .el-form-item.is-error .el-input__inner {
    border-color: #dcdfe6;
  }
}
</style>